import React, {Component} from 'react'

export default class DeleableButtons extends Component {
  render() {
    let data = this.props.list.map(item => (
      <li className="deletable-button-item" key={item.value}>
        <span>{item.label}</span>
        <span className="deletable-button" onClick={() => this.props.onClick(item)}>X</span>
      </li>
    ), this);

    return (<ul className="deletable-button-list">{data}</ul>);
  }
}

DeleableButtons.defaultProps= {
  // 待显示的原始数据
  list: [],
  // 点击删除按钮后触发的事件
  onClick: target => console.log('DeleableButtons.defaultProps.onClick:', target)
}

DeleableButtons.propTypes = {
  list: React.PropTypes.arrayOf(React.PropTypes.shape({
    label: React.PropTypes.string.isRequired
  })),
  onClick: React.PropTypes.func
}
